<template>
  <div class="swiper">
    <p class="text">
      <span class="title"><slot name="title"></slot></span>
      <span class="ename"><slot name="ename"></slot></span>
      <span class="btn" @click="btnClick()"><slot name="btn"></slot></span>
    </p>
    <div class="in">
      <van-swipe :loop="false" :width="width" indicator-color="#FFFFFF">
        
        <van-swipe-item v-for="(item,index) in foodlist" :key="index">
          <div class="item" @click="itemClick()">
            <div class="img" :style="height">
              <!-- 遮罩层，使图片不能被点开 -->
              <div class="zhezhao" :style="height"></div>
              <img :src="item.img" alt="">
            </div>
            <div class="name">{{item.name}}</div>
            <div class="ename">{{item.ename}}</div>
            <span class="star">
              <van-rate
                :value="item.star"
                :size="16"
                allow-half
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
                />
            </span>
            <span class="price">￥{{item.price}}</span>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script>
export default {
  name: 'swiper',
  data () {
    return {
      foodlist: [
        { 
          name:'葱油拌面',
          ename:'Noodles served with oil Noodles served with oil',
          img:'https://img0.baidu.com/it/u=2019274386,4258861180&fm=26&fmt=auto&gp=0.jpg',
          price:15.00,
          star:3.5
        },
        {
          name:'水饺',
          ename:'boiled dumplings',
          img:'https://img1.baidu.com/it/u=3517211753,261067421&fm=26&fmt=auto&gp=0.jpg',
          price:14.00,
          star:1
        },
        {
          name:'馄饨',
          ename:'dumpling soup',
          img:'https://img1.baidu.com/it/u=4195188679,848965894&fm=26&fmt=auto&gp=0.jpg',
          price:15.00,
          star:4
        },
      ]
    }
  },
  props:{
    width:{
      type: Number,
      default(){
        return 300
      }
    },
    height:{
      type: String,
      default(){
        return "height:11rem"
      }
    }
  },
  methods: {
    btnClick() {
      this.$router.push({
        path: "/buy"
      });
    },
    itemClick(){
      // alert('click')
    }
  }
}
</script>

<style scoped lang="scss">
.swiper {
  .text {
    width: 100%;
    margin-left: 6%;
    padding-top: 0.7rem;
    margin-bottom: 0.7rem;
    .title {
      font-weight: bolder;
      font-size: 1.3rem;
    }
    .ename {
      padding-left: 0.5rem;
      font-size: 0.5rem;
      color: #A9A9A9;
    }
    .btn {
      font-size: 1rem;
      padding-left: 2.5rem;
      color: brown;
    }
  }
  .in {
    width: 95%;
    margin-left: 5%;
    // border: black 1px solid;
    
    .item {
      width: 100%;
      .img{
        width: 100%;
        .zhezhao {
          position: absolute;
          width: 97%;
          border-radius: 0.5rem;
          background-color: rgba(0, 0, 0, 0);
        }
        img {
          width: 97%;
          height: 100%;
          border-radius: 0.5rem;
        }
      }
      .name {
        padding-top:0.5rem;
        padding-left: 0.5rem;
        font-size: 1.2rem;
      }
      .ename {
        padding-top:0.5rem;
        padding-left: 0.5rem;
        font-size: 0.5rem;
        color: 	#A9A9A9;
        display: inline-block;
        white-space: nowrap;
        width: 70%;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .star {
        padding-top:0.5rem;
        padding-left: 0.5rem;
      }
      .price {
        // position: relative;
        // bottom: 1.7rem;
        // left: 8rem;
        font-size: 1.5rem;
        font-weight: bold;
      }
    }
  }
}
</style>
